<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录验证和表单选择</title>
    <link href="../css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="../js/jquery-2.2.0.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            background: #fffff2;
        }

        a, #eventTest .panel-heading {
            cursor: pointer;
        }

        .highLight{
            color: red;
            background: #D0FFB7;
            font-weight: 800
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <br>
    <h1>事件</h1>
    <hr>
    <h3>点击/移动到面板标题，内容显示/隐藏</h3>
    <br>
    <div class="row" id="eventTest">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">什么是jQuery？</div>
                </div>
                <div class="panel-body">
                    <p>JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+,
                        Opera
                        9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
                    <p>jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John
                        Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave
                        Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
                    <p>
                        jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
                    <p>jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。

                </div>
            </div>
        </div>
    </div>
    <hr>
    <div class="row" id="tableTest">
        <div class="col-md-8 col-md-offset-2">
            <table class="table table-bordered" style="">
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
            </table>
        </div>
    </div>
    <hr>
    <b>轮番调用多个函数的功能已经在jQuery1.9中被废除</b><br>
    <button id="toggleTest" class="btn btn-warning btn-lg">点击测试toggle()方法</button>
    <hr>
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div id="content" class="table-bordered" style="background: #daf7ff;height: 50px">
                外层的div元素
                <span style="background: #ffc7c7">内层的span元素</span>
                外层的div元素
            </div>
            <br>
            <div id="msg"></div>
        </div>
    </div>
    <a class="list-group-item" href="http://e-art.taobao.com" id="eventType">事件类型测试</a>
    <div id="eventTypeMsg"></div>
    <hr>
    <div class="form-group">
        <a class="btn btn-primary" id="eventUnbind">点击显示我身上绑定的事件</a>
        <a class="btn btn-warning" id="btn_unbind">点击解绑函数2</a>
        <a class="btn btn-danger" id="btn_unbindAll">点击解绑所有函数</a>
    </div>
    <a class="btn btn-primary" id="eventBindOne">我的绑定事件只能触发一次</a>
    <div id="eventUnbindMsg"></div>
    <br>
    <a class="btn btn-primary" id="trigger">模拟点击</a>
    <a class="btn btn-primary" id="trigger2">模拟自定义事件</a>
    <a class="btn btn-primary" id="trigger3">模拟自定义事件传参数</a>
    <div id="eventTriggerMsg"></div>
    <div><input id="focusTest" value="demo"></div>
    <a class="btn btn-primary" id="namespace">命名空间便于管理</a>
    <div id="namespaceMsg"></div>
    <a class="btn btn-primary" id="namespace2">命名空间便于管理</a>
    <div id="namespaceMsg2"></div>
    <div style="height: 500px"></div>
    <br>
    <br>
</div>
<script>
    $(function () {

        $("#eventTest .panel-heading").next().hide();
/*        $("#eventTest .panel-heading").bind("click", function () {//点击切换显示/隐藏
            var $content = $(this).next();
            if ($content.is(":visible"))
                $content.hide();
            else
                $content.show();
        });*/
        //使用toggle替代上述功能
/*        $("#eventTest .panel-heading").click(function(){
            $(this).next().toggle();
        })*/


        $("#eventTest .panel-heading").bind("mouseover", function () {
            $(this).next().show();
            $(this).addClass("highLight");
        });
        $("#eventTest .panel").bind("mouseleave", function () {
            $(this).children(".panel-body").hide();
            $(this).children(".panel-heading").removeClass("highLight");
        })

        $("#tableTest tr").children().hover(function(){
            $(this).addClass("highLight")
        },function(){
            $(this).removeClass("highLight")
        })

/*        $("#toggleTest").toggle(function(){//轮番调用多个函数的功能已经在jQuery1.9中被废除
            alert("函数1")
        },function(){
            alert("函数2")
        },function(){
            alert("函数3")
        },function(){
            alert("函数4")
        }).click(function(){
            alert(132)
        })*/

        //事件冒泡
/*
        var $msg = $("#msg");
        $("#content>span").click(function(e){
            var txt = $msg.html() + "<p>内层的span元素被单击</p>";
            $msg.html(txt);
            e.stopPropagation();//阻止事件向外冒泡
        })
        $("#content").click(function(){
            var txt = $msg.html() + "<p>外层的div元素被单击</p>";
            $msg.html(txt);
        })
        $("body").click(function(){
            var txt = $msg.html() + "<p>body元素被单击</p>";
            $msg.html(txt);
        })
*/

        //事件对象的属性
        $("#eventType").click(function (e) {
            var txt = "event.type：" + e.type
                    + "<br>e.target：" + e.target //内容为：http://e-art.taobao.com
                    + "<br>e.relatedTarget：" + e.relatedTarget
                    + "<br>e.pageX：" + e.pageX
                    + "<br>e.pageY：" + e.pageY
                    + "<br>e.which：" + e.which
                    + "<br>e.metaKey：" + e.metaKey;
            $("#eventTypeMsg").html(txt);
            return false;
        })

        //事件的解绑
        var $eventTypeMsg = $("#eventUnbindMsg");
        $("#eventUnbind").click(function(){
            var txt = '我的绑定函数1';
            $eventTypeMsg.html($eventTypeMsg.html()+"<br>"+txt)
        }).click(fun2 = function(){
            var txt = '我的绑定函数2';
            $eventTypeMsg.html($eventTypeMsg.html()+"<br>"+txt)
        }).click(function(){
            var txt = '我的绑定函数3';
            $eventTypeMsg.html($eventTypeMsg.html()+"<br>"+txt)
        });
        $("#btn_unbind").click(function(){
            $("#eventUnbind").unbind("click",fun2)
        });
        $("#btn_unbindAll").click(function(){
//            $("#eventUnbind").unbind("click")
            $("#eventUnbind").unbind()//这样写也行
        });

        $("#eventBindOne").one("click",function(){
            alert("我只能被触发一次，再没有了")
        })

//        模拟操作
        var txt ;
        var $eventTriggerMsg = $("#eventTriggerMsg");
        $("#trigger").click(function(){
            txt = "我是模拟点击触发的对话框！";
            $eventTriggerMsg.html($eventTriggerMsg.html()+"<br>"+txt);
//        }).trigger("click")
        }).click();

        $("#trigger2").bind("myClick",function(){
            txt = "我是模拟触发自定义事件！";
            $eventTriggerMsg.html($eventTriggerMsg.html()+"<br>"+txt);
        }).trigger("myClick")
        $("#trigger3").bind("myClick", function (event, str1, str2, str3) {
            txt = "传进来的参数是："+str1+"，"+str2+"，"+str3;
            $eventTriggerMsg.html($eventTriggerMsg.html() + "<br>" + txt);
        }).trigger("myClick",["太阳","月亮","星星"])

/*
        $("#focusTest").focus(function(){
            $(this).addClass("highLight");
        }).blur(function(){
            $(this).removeClass("highLight");
//        }).trigger("focus")
        }).triggerHandler("focus")//此方法会触发绑定事件（添加高亮样式），但是不会真的获得焦点，光标不在输入框内。
*/
//        上述代码可简化为：
        $("#focusTest").bind(" focus blur", function(){
            $(this).toggleClass("highLight");
        })

//        命名空间的管理
        var $namespaceMsg = $("#namespaceMsg");
        $("#namespace").bind("click.plugin",function(){
            var txt = '我的绑定事件是click.plugin';
            $namespaceMsg.html($namespaceMsg.html()+"<br>"+txt)
        }).bind("mouseover",function(){
            var txt = '我的绑定事件是mouseover';
            $namespaceMsg.html($namespaceMsg.html()+"<br>"+txt)
        }).bind("dblclick.plugin",function(){
            var txt = '我的绑定事件是dblclick.plugin';
            $namespaceMsg.html($namespaceMsg.html()+"<br>"+txt)
        }).unbind(".plugin");//解绑了后缀为.plugin的事件

//        相同事件不同命名空间的执行
        var $namespaceMsg2 = $("#namespaceMsg2");
        $("#namespace2").bind("click.plugin",function(){
            var txt = '我的绑定事件是click.plugin';
            $namespaceMsg2.html($namespaceMsg2.html()+"<br>"+txt)
        }).bind("click" ,function(){
            var txt = '我的绑定事件是click';
            $namespaceMsg2.html($namespaceMsg2.html()+"<br>"+txt)
        }).bind("dblclick.plugin",function(){
            var txt = '我的绑定事件是dblclick';
            $namespaceMsg2.html($namespaceMsg2.html()+"<br>"+txt)
        }).unbind("click");//解绑了后缀为.plugin的事件
//        }).unbind("click!");//"!" 在jquery1.9之后被删除相应实现

    })

</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>